<template>
  <div class="material-left">
    <div class="title" v-text="materialTypeTitle" />

    <div class="material-tree">
      <el-scrollbar style="height: 100%">
        <div v-for="node in category" :key="node.id">
          <el-row type="flex" align="middle" justify="space-between" class="custom-tree-node__content">
            <div class="text">{{ node.title }}</div>
            <el-popover v-model="visible" placement="bottom" title="添加分组" width="300" trigger="click">
              <div class="material-popover">
                <el-input v-model="title" size="mini" type="text" placeholder="分组名称" maxlength="12" show-word-limit />
                <el-row type="flex" justify="center" class="top">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="createCategory">确定</el-button>
                </el-row>
              </div>
              <i
                v-if="permsGroupAdd"
                slot="reference"
                class="el-icon-circle-plus-outline add-grouping"
                :class="[visible ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline']"
              />
            </el-popover>
          </el-row>
          <div class="custom-tree-node__children">
            <el-row
              v-for="item in node.children"
              :key="item.id"
              type="flex"
              align="middle"
              justify="space-between"
              class="custom-tree-node"
              :class="{ active: activeId == item.id }"
            >
              <el-row type="flex" class="item-box" align="middle" justify="space-between">
                <i class="el-icon-folder-opened" />
                <div v-if="item.id != currentId" class="text" @click="selectCategory(item)">{{ item.title }}({{ item.num || 0 }})</div>
                <el-tooltip v-else effect="dark" content="输入完成后回车或点击任意位置保存" placement="bottom">
                  <el-input v-if="item.id == currentId" v-model="item.title" size="mini" :readonly="item.id != currentId" maxlength="12" show-word-limit @blur="updateCategory" />
                </el-tooltip>
              </el-row>
              <el-popover v-if="item.id > 0" placement="bottom" width="28" trigger="click">
                <div class="custom-popover">
                  <el-button v-if="permsGroupRen" size="mini" type="text" @click="customModify(item.id)">编辑</el-button>
                  <br>
                  <el-button v-if="permsGroupDel" size="mini" type="text" @click="deleteCategory(item.id)">删除</el-button>
                </div>
                <i slot="reference" class="edu-icon-more" />
              </el-popover>
            </el-row>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <el-row type="flex" align="middle" justify="center" class="material-delede">
      <el-link :underline="false" :type="isRecycle ? 'primary': ''" @click="recycle">
        <i class="el-icon-delete el-icon--left" />
        回收站
      </el-link>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    category: {
      type: Array,
      require: true,
      default: _ => {
        return [];
      }
    },
    materialTypeTitle: {
      type: String,
      require: true,
      default: ''
    },
    materialType: {
      type: String,
      require: true,
      default: ''
    },
    // 是否处于回收站中
    isRecycle: {
      type: Boolean,
      default: false
    }
  },
  inject: ['reload'],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      visible: false,
      title: '',
      currentId: 0,
      activeId: -1
    };
  },
  computed: {
    permsGroupAdd() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.group.add'
      });
    },
    permsGroupRen() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.group.rename'
      });
    },
    permsGroupDel() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.group.delete'
      });
    }
  },
  created() {
    // 注册回车事件
    document.onkeydown = e => {
      var key = window.event.keyCode;
      if (key == 13) {
        this.updateCategory();
      }
    };
  },
  methods: {
    createCategory: function() {
      this.$http.post(
        '/admin/material/category/' + this.materialType,
        {
          title: this.title
        },
        response => {
          this.reload();
        },
        error => {
          this.$message.error(error.msg);
        },
        false
      );
    },
    selectCategory: function(data, node) {
      this.activeId = data.id;
      this.$emit('update:selectCategory', data.id);
    },
    customModify: function(id) {
      this.currentId = id;
    },
    deleteCategory: function(id) {
      this.$box
        .confirm('删除分组后，素材将移动到【默认分组】')
        .then(() => {
          this.$http.delete(
            '/admin/material/category/' + id,
            {},
            response => {
              this.$message.success(response.msg);
              this.reload();
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    updateCategory: function() {
      if (this.currentId == 0) {
        return false;
      }
      const item = this.category[0].children.find(item => item.id == this.currentId);
      this.$http.put(
        '/admin/material/category/' + item.id,
        {
          title: item.title
        },
        response => {
          this.currentId = 0;
        },
        error => {
          this.$message.error(error.msg);
        },
        false
      );
    },
    // 回收站
    recycle: function() {
      this.$emit('update:recycle');
    }
  }
};
</script>
<style lang="scss">
.material-popover {
  .top {
    margin-top: 10px;
  }
}
</style>
<style lang="scss" scoped>
.material-left {
  width: 249px;
  height: calc(100vh - 226px);
  border: 1px solid rgba(228, 231, 237, 1);
  margin-left: 20px;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(48, 49, 51, 1);
    line-height: 50px;
    height: 50px;
    padding: 0 10px;
  }

  .material-tree {
    //height: calc(100vh - 275px);
    height: calc(100vh - 316px);
    position: relative;
    .el-scrollbar {
      height: 100%;
    }
    .custom-tree-node__content {
      padding: 0 15px;
      height: 40px;
      .text {
        font-size: 13px;
        color: #606266;
      }
      .add-grouping {
        font-size: 18px;
        color: $text-color-primary;
        cursor: pointer;
      }
    }
    .custom-tree-node__children {
      .custom-tree-node {
        padding-left: 30px;
        padding-right: 15px;
        height: 40px;
        &:hover {
          background-color: #f6f9ff;
          .edu-icon-more {
            display: block;
          }
        }
        &.active {
          background-color: #f6f9ff;
        }
        .item-box {
          flex: 1;
          cursor: pointer;
        }
        .text {
          flex: 1;
          height: 40px;
          line-height: 40px;
          font-size: 13px;
          color: #606266;
        }
        .input {
          ::v-deep.el-input__inner {
            border: none;
            background-color: transparent;
            height: auto;
            line-height: auto;
            padding: 0;
            font-size: 13px;
            color: #606266;
          }
        }
        .el-icon-circle-plus-outline {
          font-size: 18px;
          color: $text-color-primary;
          cursor: pointer;
        }
      }
      .edu-icon-more {
        font-size: 18px;
        color: $text-color-primary;
        cursor: pointer;
        display: none;
      }
    }
    .el-icon-folder-opened {
      font-size: 16px;
      color: $text-color-primary;
      margin-right: 6px;
    }
  }
  .material-delede {
    height: 40px;
    background-color: #fff;
    border-top: 1px solid #e4e7ed;
  }
}
</style>
